<template>
  <div class="dashboard-container">
    <!-- <div class="app-container">企业管理</div> -->
    <Card style="margin: 20px">
      <Form :model="form" :label-width="100" :rules="ruleValidate">
        <Row :gutter="16">
          <Col span="6">
            <FormItem label="标签名称" prop="tags">
              <Input v-model="form.tags" placeholder="请输入" />
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="城市" prop="province">
              <Select v-model="form.province" placeholder="请选择" @on-change="selChaneg">
                <Option v-for="(item, index) in provinces" :value="item" :key="index">{{ item }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="地区" prop="city">
              <Select v-model="form.city" placeholder="请选择">
                <Option v-for="(item, index) in citys" :value="item" :key="index">{{ item }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="企业简称" prop="shortName">
              <Input v-model="form.shortName" placeholder="请输入" />
            </FormItem>
          </Col>
        </Row>
        <Row type="flex">
          <Col span="6">
            <FormItem label="状态" prop="state">
              <!-- <Input v-model="form.state" placeholder="请选择" /> -->
              <Select v-model="form.state" placeholder="请选择">
                <Option
                  v-for="(item, index) in status"
                  :value="item.value"
                  :key="index"
                >{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
          <FormItem>
            <Button @click="eliminate">清除</Button>
            <Button type="primary" style="margin-left: 8px" @click="search">搜索</Button>
            <span @click="add">
              <Button type="success" style="margin-left: 8px">
                <Icon type="ios-add-circle-outline" />新增用户
              </Button>
            </span>
          </FormItem>
        </Row>
        <el-tag type="info" style="width: 100%; margin-bottom: 10px">
          <i class="el-icon-info"></i>
          总条数: {{ total }}
        </el-tag>
        <!-- 操作 -->
        <Table :columns="columns" :data="data">
          <template slot-scope="{ row }" slot="operation">
            <!-- 修改 -->
            <Button
              icon="ios-create-outline"
              @click="change(row)"
              type="primary"
              shape="circle"
              ghost
            ></Button>
            <!-- 启用 -->
            <Button
              icon="ios-close"
              style="margin-left: 10px; margin-right: 10px; font-size: 20px"
              @click="disabled(row)"
              shape="circle"
              type="success"
              ghost
            ></Button>
            <!-- 删除 -->
            <Button icon="ios-trash-outline" @click="remove(row)" type="error" ghost shape="circle"></Button>
          </template>
          <template slot-scope="{ row }" slot="addDate">{{ row.addDate | time(row.addDate) }}</template>
          <template slot-scope="{ row }" slot="state">{{ row.state === 1 ? '启用' : '禁用' }}</template>
        </Table>
      </Form>
      <!-- 新增弹窗 -->
      <Modal v-model="isAdd" :title="title" @on-ok="confirm" :draggable="true">
        <Form :model="addForm" :label-width="100" :rules="addRuleValidate">
          <FormItem label="企业名称" prop="shortName">
            <Input v-model="addForm.shortName" placeholder="请输入" />
          </FormItem>
          <FormItem label="所属公司" prop="company">
            <Input v-model="addForm.company" placeholder="请输入" />
            <i>https://www.tianyancha.com （在此可查询所属公司全称及简称）</i>
          </FormItem>
          <FormItem label="城市地区" prop="citys">
            <Row type="flex">
              <Col :span="6">
                <Select v-model="addForm.province" placeholder="请选择" @on-change="selChaneg">
                  <Option v-for="(item, index) in provinces" :value="item" :key="index">{{ item }}</Option>
                </Select>
              </Col>
              <Col :span="6">
                <Select v-model="addForm.city" placeholder="请选择">
                  <Option v-for="(item, index) in citys" :value="item" :key="index">{{ item }}</Option>
                </Select>
              </Col>
            </Row>
          </FormItem>
          <FormItem label="标签" prop="tags">
            <Input v-model="addForm.tags" placeholder="请输入" />
          </FormItem>
          <FormItem label="备注" prop="remarks">
            <Input v-model="addForm.remarks" placeholder="请输入" type="textarea" />
          </FormItem>
        </Form>
      </Modal>
      <Page :total="total" @on-change="changePage" />
    </Card>
  </div>
</template>

<script>
import { list, add, remove, update, disabled } from '@/api/hmmm/companys.js'
import moment from 'moment'
import { provinces, citys } from '@/api/hmmm/citys.js'

export default {
  components: {},
  filters: {
    time (val) {
      return moment(val).format('YYYY-MM-DD')
    }
  },
  name: 'CompanysList',
  data () {
    return {
      status: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 0,
          label: '禁用'
        }
      ],
      page: 1, // 当前页数
      pagesize: 10, // 每页数量
      total: 0, // 总数量,
      // 新增用户表单
      addForm: {
        shortName: '', // 企业简称
        company: '', // 所属公司
        province: '', // 省份
        city: '', // 城市
        tags: '', // 标签
        remarks: '' // 备注
      },
      // 新增用户表单验证
      addRuleValidate: {
        shortName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        company: [{ required: true, message: '所属公司', trigger: 'blur' }],
        province: [],
        city: [],
        citys: [{ required: true, trigger: 'blur' }],
        tags: [{ required: true, message: '请输入企业标签', trigger: 'blur' }],
        remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      // 显示新增弹窗
      isAdd: false,
      form: {
        shortName: '', // 简称
        city: '', // 城市
        province: '', // 省份
        tags: '', // 标签名称
        state: '' // 状态
      },
      // 搜索框表单验证规则
      ruleValidate: {
        shortName: [],
        city: [],
        province: [],
        state: [],
        tags: []
      },
      // 表头
      columns: [
        {
          title: '序号',
          key: 'id',
          align: 'center'
        },
        {
          title: '企业编号',
          key: 'number',
          align: 'center'
        },
        {
          title: '企业简称',
          key: 'shortName',
          align: 'center'
        },
        {
          title: '标签',
          key: 'tags',
          align: 'center'
        },
        {
          title: '创建者',
          key: 'creatorID',
          align: 'center'
        },
        {
          title: '创建日期',
          key: 'addDate',
          align: 'center',
          slot: 'addDate'
        },
        {
          title: '备注',
          key: 'remarks',
          align: 'center'
        },
        {
          title: '状态',
          key: 'state',
          align: 'center',
          slot: 'state'
        },
        {
          title: '操作',
          key: 'operation',
          slot: 'operation',
          align: 'center',
          width: 160
        }
      ],
      // 表格数据
      data: [],
      title: '', // 对话框标题
      provinces: provinces(), // 省份列表
      citys: '', // 城市列表
      // id: '',
      node: '', // 当行数据
      state: 1, // 启用禁言
      stateMsg: '' // 启用禁言提示信息
    }
  },
  created () {
    this.getList()
    this.addList()
    this.citys = citys(this.addForm.province)
    // console.log(this.form.province)
  },
  methods: {
    //! 分页器
    async changePage (val) {
      this.page = val
      const res = await list({ page: this.page, pagesize: this.pagesize })
      this.data = res.data.items
    },
    //! 搜索筛选
    async search () {
      const res = await list({ ...this.form, page: 1, pagesize: 10 })
      this.total = res.data.counts
      // console.log(res)
      this.data = res.data.items
    },
    //! 搜索清除
    eliminate () {
      this.form = {
        shortName: '', // 简称
        city: '', // 城市
        province: '', // 省份
        tags: '', // 标签名称
        state: '' // 状态
      }
      this.getList()
    },
    //! 详细城市
    selChaneg (value) {
      // console.log(value)
      this.citys = citys(value)
    },
    //! 启用禁用功能
    async disabled (row) {
      // console.log(row)
      if (row.state === 0) {
        this.state = 1
        this.stateMsg = '启用成功'
      } else {
        this.state = 0
        this.stateMsg = '禁用成功'
      }
      await disabled({ id: row.id, state: this.state })
      this.$Message.success({
        content: this.stateMsg
      })
      this.getList()
    },
    //! 获取企业列表信息
    async getList () {
      const res = await list()
      this.total = res.data.counts
      // console.log(res)
      this.data = res.data.items
    },
    //! 新增用户显示对话框
    add () {
      this.isAdd = true
      this.title = '新增用户'
    },
    //! 编辑用户对话框
    async change (row) {
      console.log(row)
      this.isAdd = true
      this.title = '编辑用户'
      // console.log(row)
      // this.id = row.id
      this.node = row
    },
    //! 新增/修改用户
    async confirm () {
      if (this.title === '编辑用户') {
        try {
          const data = { ...this.addForm, isFamous: true, id: this.node.id, creatorID: this.node.creatorID, number: this.node.number, state: this.node.state }
          // console.log(data)
          await update(data)
          this.$Message.success({
            content: '修改信息成功'
          })
          this.getList()
          this.addForm = {
            shortName: '', // 企业简称
            company: '', // 所属公司
            province: '', // 省份
            city: '', // 城市
            tags: '', // 标签
            remarks: '' // 备注
          }
        } catch (error) { }
      } else {
        try {
          add({ ...this.addForm, isFamous: true })
          this.$Message.success({
            content: '添加成功'
          })
          this.getList()
          this.addForm = {
            shortName: '', // 企业简称
            company: '', // 所属公司
            province: '', // 省份
            city: '', // 城市
            tags: '', // 标签
            remarks: '' // 备注
          }
        } catch (error) { }
      }
    },
    //! 新增用户关闭对话框
    async addList () {
      // const res = await add()
      // console.log(res)
    },
    //! 删除
    async remove (row) {
      // try {
      //   await remove(row)
      //   this.$Message.success({
      //     content: '删除成功'
      //   })
      //   this.getList()
      // } catch (error) {
      //   this.$Message.success({
      //     content: '删除失败'
      //   })
      // }
      // -------------------------------
      try {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            // console.log(obj.id) // 当前id
            remove(row).then(() => {
              // 重新渲染页面
              this.getList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.Card {
  margin: 20px;
}
</style>
